<template>
  <div class="header-box">
    <div class="header-content">
      <div class="header-content-nav">
        <div class="logo">
          <img src="@/assets/logo.webp" />
        </div>

        <div
          v-for="(item, idx) in navMenus"
          :key="idx"
          class="nav-menu nas tse"
          :class="curSelectedItem === item ? 'nav-menu-s' : ''"
          @click="switchMenuIdx(item)"
        >
          <div class="nav-menu-title">
            {{ item.name }}
          </div>
        </div>

        <div style="flex: 1"></div>

        <div v-if="isLogin" class="nav-btn-box">
          <div class="nav-btn-box-l">
            <img src="@/assets/user.png" />
          </div>
          <div class="nav-btn-box-r">
            <div v-if="account" class="nav-btn-box-r-t">{{ account }}</div>
            <div v-if="nickname" class="nav-btn-box-r-b">{{ nickname }}</div>
          </div>
          <div class="logout-btn nas tse" @click="logout()">退出</div>
        </div>

        <div v-else class="nav-btns">
          <div class="nas tse" @click="toLogin()">请登录</div>
          <div style="width: 1px; height: 16px; background: gray"></div>
          <div class="nas tse" @click="toRegister()">请注册</div>
        </div>
      </div>

      <div style="color: red; font-size: 12px; margin-top: 20px">
        注意：本页信息由用户及第三方发布，真实性、合法性由发布者负责。
        “湖南中娱互动网络科技有限公司”：让你提前汇款，或者价格明显低于市价，均有骗子嫌疑，不要轻易相信。
      </div>

      <div v-if="breadPaths && breadPaths.length > 1" class="header-content-breadcrumb">
        <div v-for="(item, idx) in breadPaths" :key="idx" class="header-content-breadcrumb-item">
          <div
            class="header-content-breadcrumb-name"
            :class="idx === breadPaths.length - 1 ? 'header-content-breadcrumb-name-s ' : 'nas tse'"
            @click="tapBreadPath(item)"
          >
            {{ item.name }}
          </div>
          <div v-if="idx < breadPaths.length - 1" class="header-content-breadcrumb-split">/</div>
        </div>
      </div>
      <div v-else style="height: 40px"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'header',

  props: {
    type: {
      type: String,
      default: ''
    }
  },

  computed: {
    ...mapState({
      isLogin: (state) => state.common.isLogin,
      account: (state) => state.common.account,
      nickname: (state) => state.common.nickname,
      subTypeName: (state) => state.common.subTypeName
    })
  },

  data() {
    return {
      navMenus: [
        {
          name: '首页',
          path: '/'
        },
        {
          name: '生活服务',
          path: '/category?type=1'
        },
        {
          name: '商务服务',
          path: '/category?type=2'
        },
        {
          name: '宠物',
          path: '/category?type=3'
        },
        {
          name: '信息发布',
          path: '/issueNews',
          needLogin: true
        },
        {
          name: '平台投诉中心',
          path: '/report',
          needLogin: true
        }
      ],

      breadPaths: [],

      curSelectedItem: null
    }
  },

  mounted() {
    if (this.type === 'home') {
      this.curSelectedItem = this.navMenus[0]

      this.breadPaths = [
        {
          name: '首页',
          path: '/home'
        }
      ]
    } else if (this.type === 'category') {
      this.breadPaths = [
        {
          name: '分类',
          path: '/category'
        }
      ]

      if (this.$route.query.type + '' === '1') {
        this.breadPaths = [
          {
            name: '生活服务',
            path: '/category?type=1'
          }
        ]
        this.curSelectedItem = this.navMenus[1]
      } else if (this.$route.query.type + '' === '2') {
        this.breadPaths = [
          {
            name: '商务服务',
            path: '/category?type=2'
          }
        ]
        this.curSelectedItem = this.navMenus[2]
      } else if (this.$route.query.type + '' === '3') {
        this.breadPaths = [
          {
            name: '宠物',
            path: '/category?type=3'
          }
        ]
        this.curSelectedItem = this.navMenus[3]
      }

      if (this.$route.query.id) {
        this.breadPaths.push({
          name: this.subTypeName,
          path: ''
        })
      }
    } else if (this.type === 'issueNews') {
      this.curSelectedItem = this.navMenus[4]

      this.breadPaths = [
        {
          name: '信息发布',
          path: '/issueNews'
        }
      ]
    } else if (this.type === 'report') {
      this.curSelectedItem = this.navMenus[5]

      this.breadPaths = [
        {
          name: '平台投诉',
          path: '/report'
        }
      ]
    } else if (this.type === 'newsDetail') {
      this.curSelectedItem = null

      this.breadPaths = [
        {
          name: '分类',
          path: '/category'
        },
        {
          name: '详情',
          path: ''
        }
      ]

      if (this.$route.query.type + '' === '1') {
        this.breadPaths = [
          {
            name: '生活服务',
            path: '/category?type=1'
          },
          {
            name: '详情',
            path: ''
          }
        ]
      } else if (this.$route.query.type + '' === '2') {
        this.breadPaths = [
          {
            name: '商务服务',
            path: '/category?type=2'
          },
          {
            name: '详情',
            path: ''
          }
        ]
      } else if (this.$route.query.type + '' === '3') {
        this.breadPaths = [
          {
            name: '宠物',
            path: '/category?type=3'
          },
          {
            name: '详情',
            path: ''
          }
        ]
      }
    }
  },

  methods: {
    switchMenuIdx(item) {
      if (this.curSelectedItem === item) {
        return
      }

      this.curSelectedItem = item

      if (item.needLogin && !this.isLogin) {
        this.$toast('请先登录!', {
          type: 'error'
        })
      } else {
        const oldPath = this.$route.path

        this.$router.push(item.path)

        if (!this.$startsWith(oldPath, '/category')) {
          return
        }

        if (this.$startsWith(item.path, '/category')) {
          location.reload()
        }
      }
    },

    tapBreadPath(item) {
      const oldPath = this.$route.path

      this.$router.push(item.path)

      if (!this.$startsWith(oldPath, '/category')) {
        return
      }

      if (this.$startsWith(item.path, '/category')) {
        location.reload()
      }
    },

    toLogin() {
      this.$router.push('/login')
    },

    toRegister() {
      this.$router.push('/login?type=req')
    },

    logout() {
      this.$store.dispatch('setAccount', '')
      this.$store.dispatch('setToken', '')
      this.$store.dispatch('setAccountId', '')
      this.$store.dispatch('setNickname', '')
      this.$store.dispatch('setIsLogin', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.header-box {
  min-width: 1440px;
  padding-top: 36px;
  background: white;

  display: flex;
  justify-content: center;

  .header-content {
    width: 1440px;

    .header-content-nav {
      display: flex;
      align-items: center;

      .logo {
        flex: 0 0 auto;

        margin-right: 60px;

        display: flex;
        align-items: center;

        img {
          width: 100px;
          height: 100px;
          border-radius: 8px;
        }
      }

      .nav-menu {
        margin-right: 40px;

        flex: 0 0 auto;
        height: 60px;
        border-radius: 8px;

        display: flex;
        align-items: center;

        .nav-menu-title {
          padding-left: 12px;
          padding-right: 12px;
          font-size: 20px;
          color: #828698;
        }
      }

      .nav-menu-s {
        .nav-menu-title {
          font-weight: bold;
          color: #29435f;
        }
      }

      .nav-btn {
        margin-left: 56px;

        img {
          width: 40px;
          height: 40px;
          font-size: 0px;
        }
      }

      .nav-btn-box {
        margin-left: 56px;

        display: flex;
        align-items: center;

        .nav-btn-box-l {
          font-size: 0;

          img {
            width: 40px;
            height: 40px;
            font-size: 0px;
          }
        }

        .nav-btn-box-r {
          margin-left: 8px;

          .nav-btn-box-r-t {
            font-size: 16px;
            color: #29435f;
          }

          .nav-btn-box-r-b {
            font-size: 14px;
            color: gray;
          }
        }

        .logout-btn {
          margin-left: 12px;
          font-size: 14px;
          color: red;
        }
      }

      .nav-btns {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #29435f;

        :first-child {
          margin-right: 10px;
        }

        :last-child {
          margin-left: 10px;
        }
      }
    }

    .header-content-breadcrumb {
      padding-top: 30px;
      padding-bottom: 20px;
      color: #828698;

      display: flex;
      align-items: center;

      .header-content-breadcrumb-item {
        display: flex;
        align-items: center;

        .header-content-breadcrumb-name {
          font-size: 20px;
        }

        .header-content-breadcrumb-name-s {
          color: #29435f;
        }

        .header-content-breadcrumb-split {
          margin-left: 12px;
          margin-right: 12px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
